<template>
	<view class="content">
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
			<swiper-item v-for="(item,index) in swiper" :key="index">
				<view class="imglist">
					<image :src="item.url"></image>
				</view>
			</swiper-item>
		</swiper>
		<!--  -->
		<view class="main-bar flex-box">
			<view class="flex-item" v-for="(item, index) in contentList" :key="index">
				<image :src="'/static/image/index/t_' + (index + 1) + '.png'" class="img"></image>
				<view>{{item.name}}</view>
			</view>
		</view>
		<!-- 推荐歌单 -->
		<song-list title="热门推荐" :list="commend"></song-list>
		<song-list title="新碟上架" :list="newAlbum"></song-list>
		<!-- 切换 -->
		<view class="tab">
			<view class="flex-box left">
				<view :class="[{huayu:newType ==1},'liuxing']" @click="switchType(1)">
					华语
				</view>|
				<view :class="[{huayu:newType ==2},'liuxing']" @click="switchType(2)">
					流行
				</view>
			</view>
			<view class="flex-box right">
				<view class="more" v-show="newType ==1">
					更多华语
				</view>
				<view class="more" v-show="newType ==2">
					流行推荐
				</view>
			</view>
		</view>
		<QSGradientSwiper height="300" circular ref="QSGradientSwiper"></QSGradientSwiper>
	</view>
</template>

<script>
	import service from '../../untils/service.js'
	import songList from '../../components/songList.vue'
	import QSGradientSwiper from '../../components/QS-Gradient-Swiper/QS-Gradient-Swiper-nvue.vue'
	export default {
		components: {
			songList,
			QSGradientSwiper
		},
		data() {
			return {
				swiper: [],
				contentList: [{
						name: "每日推荐"
					},
					{
						name: "歌单"
					},
					{
						name: "排行榜"
					},
					{
						name: "电台"
					},
					{
						name: "直播"
					}
				],
				commend: [],
				newAlbum: [],
				// 华语
				newType: 1,
				// loading: false,
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				duration: 300
			};
		},
		onReady() {
			this.$refs.QSGradientSwiper.setData([{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=791a660d9c2397ddd679980c6983b216/591f9758d109b3de80a0bb82c1bf6c81810a4c89.jpg',
					backgroundColor: '#b36d61'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=e8b1d9c798cad1c8d0bbfc2f4f3c67c4/ab5e4efbfbedab64dbb08428fa36afc37b311eed.jpg',
					backgroundColor: '#e0eee8'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=a06847cac5fcc3ceb4c0c93ba244d6b7/85d3bc014a90f60394f557af3412b31bb151ed67.jpg',
					backgroundColor: '#221620'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=3792b3922da446237ecaa56aa8237246/c4be73094b36acaf746d5f1471d98d1000e99c1e.jpg',
					backgroundColor: '#e3e7f2'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=d97763e5f5dcd100cd9cf829428a47be/bc48eec4b74543a96096332413178a82b801141e.jpg',
					backgroundColor: '#79b3db'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=f480662e3cadcbef01347e0e9cae2e0e/8f5b1cd8bc3eb13517d8e851ab1ea8d3fc1f4489.jpg',
					backgroundColor: '#927469'
				},
				{
					path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=b5dea914cefdfc03e578e3b0e43e87a9/45c1f303738da9774430d9c1bd51f8198718e38a.jpg',
					backgroundColor: '#c4c8af'
				}
			]);
		},
		onLoad() {
			this.getBanner();
			this.getCommend();

		},

		methods: {
			getBanner() {
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: service.getBanner,
					data: {},
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						this.swiper = res.data.data.imgList;
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求错误',
							icon: 'none',
							duration: 2000
						});
					},
					complete: () => {
						// this.loading = false;
						uni.hideLoading()
					}
				})
			},
			getCommend() {
				uni.request({
					url: service.getCommend,
					data: {},
					method: 'GET',
					success: (res) => {
						// console.log(res.data);
						this.commend = res.data.data.imgList;
						this.newAlbum = res.data.data.newAlbum;
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求错误',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			switchType(type) {
				this.newType = type;
				if (type == 1) {
					this.$refs.QSGradientSwiper.setData([{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=791a660d9c2397ddd679980c6983b216/591f9758d109b3de80a0bb82c1bf6c81810a4c89.jpg',
							backgroundColor: '#b36d61'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=e8b1d9c798cad1c8d0bbfc2f4f3c67c4/ab5e4efbfbedab64dbb08428fa36afc37b311eed.jpg',
							backgroundColor: '#e0eee8'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=a06847cac5fcc3ceb4c0c93ba244d6b7/85d3bc014a90f60394f557af3412b31bb151ed67.jpg',
							backgroundColor: '#221620'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=3792b3922da446237ecaa56aa8237246/c4be73094b36acaf746d5f1471d98d1000e99c1e.jpg',
							backgroundColor: '#e3e7f2'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=d97763e5f5dcd100cd9cf829428a47be/bc48eec4b74543a96096332413178a82b801141e.jpg',
							backgroundColor: '#79b3db'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=f480662e3cadcbef01347e0e9cae2e0e/8f5b1cd8bc3eb13517d8e851ab1ea8d3fc1f4489.jpg',
							backgroundColor: '#927469'
						},
						{
							path: 'http://imgsrc.baidu.com/forum/w%3D580/sign=b5dea914cefdfc03e578e3b0e43e87a9/45c1f303738da9774430d9c1bd51f8198718e38a.jpg',
							backgroundColor: '#c4c8af'
						}
					]);
				} else if (type == 2) {
					this.$refs.QSGradientSwiper.setData([{
							path: 'http://p2.music.126.net/-czplX_ad3SvAOO0TqeQeQ==/109951164975865078.jpg?param=140y140',
							backgroundColor: '#FAC65A'
						},
						{
							path: 'http://p2.music.126.net/XWYYemCMmSfgFTrgdwR1CA==/109951164737070906.jpg?param=140y140',
							backgroundColor: '#e0eee8'
						},
						{
							path: 'http://p2.music.126.net/qgV1umHW_pidImy3WYNxnw==/109951164850808707.jpg?param=140y140',
							backgroundColor: '#A58B8F'
						},
						{
							path: 'http://p2.music.126.net/x44v5IkLN30gWgUYWYivbg==/109951164000997664.jpg?param=140y140',
							backgroundColor: '#e3e7f2'
						},
						{
							path: 'http://p1.music.126.net/InXJe1vvoL9MCwcnz2htww==/109951164890326213.jpg?param=140y140',
							backgroundColor: '#8594B2'
						},
						{
							path: 'http://p1.music.126.net/66kOkCyohuchHI5jHF0PvQ==/109951164880139539.jpg?param=140y140',
							backgroundColor: '#927469'
						},
						{
							path: 'http://p1.music.126.net/MuP38iOekk5hlF2yXfITKA==/109951164945787957.jpg?param=140y140',
							backgroundColor: '#c4c8af'
						}
					]);
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		.imglist {
			width: 100%;

			image {
				width: 100%;
				height: 150px
			}
		}

		// 
		.main-bar {
			// padding-bottom: 22rpx;
			text-align: center;
			line-height: 70rpx;
			color: #666;
			border-bottom: 1rpx solid #e6e6e6;

			.img {
				display: block;
				width: 92rpx;
				height: 92rpx;
				margin: 0 auto;
			}
		}

		// 华语
		.tab {
			margin:20rpx 0 80rpx 0;

			.left {
				float: left;
				padding-left: 8px;
				color: #666;

				.huayu {
					color: black;
					font-weight: 700;
					margin: 0 8rpx;
				}

				.liuxing {
					margin: 0 8rpx;
				}
			}

			.right {
				float: right;

				.more {
					border: 1px solid #666;
					padding: 2px 14px;
					margin-right: 16rpx;
					border-radius: 18px;
				}
			}

		}
	}
	// 平台差异化处理的代码可以放在底部，这样有利于集中管理
	/* #ifdef MP-WEIXIN */
	.content{
		margin-top:52rpx;
	}
	/* #endif */
</style>
